<template>
  <div id="Element" class="resetElementDialogFull">
    <el-table
      ref="refElTable"
      v-loading="tableLoading"
      highlight-current-row
      :default-sort="{prop: 'date', order: 'descending'}"
      size="mini"
      border
      :data="tableMixinData"
      style="width: 100%"
      element-loading-background="rgba(3, 3, 3, 0.1)"
      element-loading-text="加载中"
      element-loading-spinner="el-icon-loading"
      @select="select"
      @select-all="selectAll"
      @selection-change="selectChange"
    >
      <!--多选框-->
      <el-table-column
        type="selection"
        sortable
        width="55"
      />
      <el-table-column
        align="center"
        prop="status"
        sortable
        label="状态"
        width="120"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.status==0">离线</span>
          <span v-else type="primary">在线</span>
        </template>
      </el-table-column>
      <!--点击操作-->
      <el-table-column
        fixed="right"
        align="center"
        label="操作"
        width="140"
      >
        <template slot-scope="scope">
          <!--scope.$index-->
          <el-button type="text" size="small" @click="tableHandleCheckClick(scope.row)">
            查看
          </el-button>
          <el-button type="text" size="small" @click="tableHandleEditClick(scope.row)">
            编辑
          </el-button>
          <el-button type="text" size="small" @click="tableHandleDeleteClick(scope.row)">
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button @click="getCheckColumn">getCheckColumn</el-button>
    <el-button @click="setCheckColumn">setCheckColumn</el-button>
    <el-button @click="clearSelection">clearSelection</el-button>
    <el-button @click="setCurrentRow">setCurrentRow</el-button>
    <div class="block columnCC mt-2 mb-5">
      <el-pagination
        :current-page="pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageTotal"
        @size-change="pageHandleSizeChange"
        @current-change="pageHandleCurrentChange"
      />
    </div>
    <el-form ref="refForm" :inline="false" :model="formModel" :rules="fromRules" label-width="100px">
      <el-form-item
        label="活动名称"
        prop="name"
        label-position="left"
      >
        <el-input v-model="formModel.name" />
      </el-form-item>
      <el-form-item label="活动区域" prop="region">
        <el-select v-model="formModel.region" placeholder="请选择活动区域">
          <el-option label="区域一" value="shanghai" />
          <el-option label="区域二" value="beijing" />
        </el-select>
      </el-form-item>
      <el-form-item label="活动时间" required>
        <el-form-item prop="date1">
          <el-date-picker v-model="formModel.date1" type="date" placeholder="选择日期" style="width: 100%;" />
        </el-form-item>
        <el-col :span="11">
          <el-form-item prop="date1">
            <el-date-picker v-model="formModel.date1" type="date" placeholder="选择日期" style="width: 100%;" />
          </el-form-item>
        </el-col>
        <el-col class="line" :span="2">
          -
        </el-col>
        <el-col :span="11">
          <el-form-item prop="date2">
            <el-time-picker v-model="formModel.date2" placeholder="选择时间" style="width: 100%;" />
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="即时配送" prop="delivery">
        <el-switch v-model="formModel.delivery" />
      </el-form-item>
      <el-form-item label="活动性质" prop="type">
        <el-checkbox-group v-model="formModel.type">
          <el-checkbox label="美食/餐厅线上活动" name="type" />
          <el-checkbox label="地推活动" name="type" />
          <el-checkbox label="线下主题活动" name="type" />
          <el-checkbox label="单纯品牌曝光" name="type" />
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="特殊资源" prop="resource">
        <el-radio-group v-model="formModel.resource">
          <el-radio label="线上品牌商赞助" />
          <el-radio label="线下场地免费" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="活动形式" prop="desc">
        <el-input v-model="formModel.desc" type="textarea" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('formModel')">
          立即创建
        </el-button>
        <el-button @click="resetForm('formModel')">
          重置
        </el-button>
      </el-form-item>
    </el-form>
    <!--多个表单验证-->
    <el-form
      ref="reForFormModal"
      :model="forFormModal"
      size="mini"
      :rules="forFormRules"
    >
      <el-form-item
        label-position="left"
        label="名称"
        prop="title"
      >
        <el-input v-model="forFormModal.title" size="mini" />
      </el-form-item>
      <div v-for="(item, index) in forFormModal.userList" :key="index">
        <el-col :span="4" style="display: inline">
          <el-form-item
            label="账号："
            label-width="80px"
            :prop="'userList.'+ index +'.name'"
            :rules="forFormRules.username"
          >
            <el-input
              v-model="item.username"
              class="widthPx-80"
              size="mini"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item
            label="密码："
            label-width="80px"
            :prop="'userList.'+ index +'.password'"
            :rules="forFormRules.password"
          >
            <el-input
              v-model="item.password"
              class="widthPx-100"
              type="password"
            />
          </el-form-item>
        </el-col>
        <!--第二个表格-->
        <el-col :span="5">
          <el-form-item
            label="手机号："
            label-width="80px"
            :prop="'userList.'+ index +'.phone'"
            :rules="forFormRules.phone"
          >
            <el-input
              v-model="item.phone"
              class="widthPx-100"
              size="mini"
            />
          </el-form-item>
        </el-col>
      </div>
    </el-form>
    <!--dialog fullscreen-->
    <el-dialog
      :title="'任务管理-'+modalTitle"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="beforeCloseModal"
    >
      <span>dsfsdf</span>
      <span>dsfsdf</span>
      <span>dsfsdf</span>
      <span>dsfsdf</span>
      <span slot="footer" class="dialog-footer rowCC">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
      </span>
      <!--保存按钮-->
      <!--<div class="text-center fixBtnToBottom">-->
      <!--<el-button type="primary" @click.prevent="saveBtnClick">-->
      <!--保存-->
      <!--</el-button>-->
      <!--</div>-->
    </el-dialog>
    <div>
      <el-button @click="dialogVisible=true">
        显示dialog框
      </el-button>
    </div>
    <!--提示框-->
    <el-button @click="message">message</el-button>
    <el-button @click="confirm" />
    <el-button @click="notify">notify</el-button>
    <!--时间日期-->
    <div>
      <el-date-picker
        v-model="dateTimeRangeModal"
        type="datetimerange"
        :picker-options="datePickerOptions"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      />
    </div>
    <!--导出excel-->
    <!--<el-button @click="exportExcel">导出excel</el-button>-->
    <div>
      <el-tree
        ref="elTree"
        :data="treeData"
        show-checkbox
        check-on-click-node
        render-after-expand
        expand-on-click-node
        auto-expand-parent
        highlight-current
        accordion
        node-key="id"
        :default-expanded-keys="[2, 3]"
        :default-checked-keys="[5]"
        :props="defaultProps"
        @node-click="nodeClick"
        @node-contextmenu="nodeContextmenu"
        @check-change="checkChange"
        @check="check"
        @current-change="currentChange"
      />
      <el-button @click="updateKeyChildren">updateKeyChildren</el-button>

      <el-button @click="getCheckedNodes">getCheckedNodes</el-button>
      <el-button @click="setCheckedNodes">setCheckedNodes</el-button>

      <el-button @click="getCheckedKeys">getCheckedKeys</el-button>
      <el-button @click="setCheckedKeys">setCheckedKeys</el-button>

      <el-button @click="setCheckedKeys">setCheckedKeys</el-button>
      <el-button @click="setCheckedKeys">setCheckedKeys</el-button>

      <el-button @click="setChecked">setChecked</el-button>
      <el-button @click="getHalfCheckedNodes">getHalfCheckedNodes</el-button>
      <el-button @click="getHalfCheckedKeys">getHalfCheckedKeys</el-button>

      <el-button @click="getCurrentKey">getCurrentKey</el-button>
      <el-button @click="getCurrentNode">getCurrentNode</el-button>
      <el-button @click="setCurrentKey">setCurrentKey</el-button>
      <el-button @click="setCurrentNode">setCurrentNode</el-button>

      <el-button @click="getNode">getNode</el-button>
      <el-button @click="remove">remove</el-button>
      <el-button @click="append">append</el-button>
      <el-button @click="insertBefore">insertBefore</el-button>
      <el-button @click="insertAfter">insertAfter</el-button>
    </div>
    <!--slot测试-->
    <TestSlot>
      <div slot="fai" class="tmp1">
        <span>Leaf 6</span>
        <span>Leaf 7</span>
        <span>Leaf 8</span>
        <span>Leaf 9</span>
        <span>Leaf 10</span>
      </div>
      <!-- 第三次使用：直接显示 -->
      <template slot-scope="scope">
        {{ scope }}
      </template>
    </TestSlot>

    <div>watch监听测试</div>
    <el-input v-model="watchTest.test1" />
    <el-input v-model="watchTest.layerFirst.test2" />
    <el-input v-model="watchTest.layerFirst.layerSecond" />
    <el-input v-model="watchTest.layerFirst.innerObj.test3" />
    <div class="mb-10" />
    <!--图片上传测试-->
    <!--<div>图片上传测试</div>-->
    <!--<el-upload-->
    <!--ref="uploadMutiple"-->
    <!--:auto-upload="false"-->
    <!--action="Fake Action"-->
    <!--:on-success="onSuccess"-->
    <!--:on-change="handleChange"-->
    <!--:file-list="fileList"-->
    <!--:http-request="httpRequest"-->
    <!--:before-upload="before_upload"-->
    <!--multiple-->
    <!--:limit="3"-->
    <!--&gt;选取文件</el-upload>-->
    <!--<el-button type="primary" size="small" @click="submitUpload">上传</el-button>-->


    <div>图片上传测试</div>
    <el-upload
      ref="uploadMutiple"
      class="upload-demo"
      action="Fake Action"
      :auto-upload="false"
      :show-file-list="false"
      :on-change="handleChangeMixin"
      :on-exceed="handleChangeMixin"
      :limit="1"
      :file-list="fileListMixin"
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过2M</div>
    </el-upload>
    <el-button type="primary" size="small" @click="submitUploadTwo">上传</el-button>


    <div class="mt-5">
      <div>测试参数传递</div>
      <el-button @click="testParam">testParam</el-button>
    </div>

  </div>
</template>

<script>
  // import { mapState, mapMutations, mapActions } from 'vuex'
  import elementUiCDataOrMethod from './elementUiCDataOrMethod'
  import TestSlot from './components/TestSlot'
  import ThemePicker from '@/components/ThemePicker'
  export default {
    name: 'Element',
    components: {
      TestSlot,
      ThemePicker
    },
    mixins: [elementUiCDataOrMethod],
    props: {
      // treeData: Array,
    },
    data() {
      return {
        fileList: [],
        watchTest: {
          test1: '',
          layerFirst: {
            test2: '',
            layerSecond: 2,
            innerObj: {
              test3: 111
            }
          }
        }
      }
    },
    computed: {
      // ...mapState('user', ['token', 'userInfo'])
    },
    watch: {
      'watchTest.layerFirst.layerSecond': {
        handler(newName, oldName) {
          console.log('newName, oldName', newName, oldName)
        },
        // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
        immediate: true
        // deep: true
      },
      'watchTest.test1': {
        handler(newName, oldName) {
          console.log('test1newName, oldName', newName, oldName)
        },
        // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
        immediate: true
        // deep: true
      },
      'watchTest.layerFirst.innerObj.test3': {
        async handler(newName, oldName) {
          const promiseData = await this.promiseTest()
          console.log('promiseData' + promiseData)
          console.log('test3newName, oldName', newName, oldName)
        },
        // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
        immediate: true
        // deep: true
      },
      'watchTest.layerFirst.test2': {
        handler(newName, oldName) {
          console.log('test2newName, oldName', newName, oldName)
        }
        // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
        // immediate: true
        // deep: true
      }
      // 'cmAddForm.enginePlatform': function(val) {
      //   console.log('enginePlatformval', val)
      //   if (val) {
      //     this.emissionOptionReq()
      //   }
      // }
    },
    created() {

    },
    mounted() {

    },
    methods: {

      promiseTest() {
        return new Promise(resolve => {
          setTimeout(() => {
            console.log('11111')
            resolve('finish')
          }, 1000)
        })
      },
      // ...mapActions('user', ['closeSideBar']),
      // ...mapMutations('user', ['CHAGE_TOKEN']),
      functionTest() {},
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => {
          if (j === 'status') {
            return
          } else {
            return v[j]
          }
        }))
      },
      // exportExcel() {
      //   import('@/vendor/Export2Excel').then(excel => {
      //     /*
      //     *  date: '2016-05-02',
      //     name: '王小虎',
      //     address: '上海市普陀区金沙江路 1518 弄',
      //     status: 1
      //     * */
      //     const tHeader = ['date', 'name', 'address', 'status', 'Date']
      //     // const filterVal = ['status']
      //     // const list = this.list
      //     // const data = this.formatJson(filterVal, list)
      //     excel.export_json_to_excel({
      //       header: tHeader,
      //       data: this.tableMixinData,
      //       filename: 'test',
      //       autoWidth: true,
      //       bookType: 'xlsx'
      //     })
      //     // this.downloadLoading = false
      //   })
      // },

      // 上传成功回调
      onSuccess(param1, param2, param3) {
        console.log(param1, param2, param3, 'before_uploadparam1, param2, param3')
      },
      // 此处存储已经选择的文件
      handleChange(file, fileList) {
        console.log('file, fileList', file, fileList)
        this.fileList = fileList
      },
      before_upload(param1, param2, param3) {
        console.log(param1, param2, param3, 'before_uploadparam1, param2, param3')
      },
      // httpRequest会触发多次
      httpRequest(param1, param2, param3) {
        console.log(param1, param2, param3, 'httpRequestparam1, param2, param3')
      },

      /*图片上传*/
      async submitUploadTwo(){
        let data=await this.submitUploadMixin("/upload/upload/uploadGetMetaData")
        console.log("data",data)
        this.submitForm.image=data[0].url
      },

      // 一次触发提交
      async submitUpload() {
        // this.$refs.uploadMutiple.submit()
        let formData = new FormData()
        console.log('this.fileList', this.fileList)
        for (let i = 0; i <this.fileList.length; i++) {
          let item=this.fileList[i]
          console.log('item.raw', item.raw)
          let validResult=await this.imageValid(item.raw);
          if(!validResult) return;
          formData.append("files", item.raw);
        }
        await this.$comentUtil.sleep()
        this.$axiosReq({
          url: '/upload/upload/uploadGetMetaData',
          data: formData, method: 'POST', bfLoading: true, isUploadFile: true
        }).then(res => {
          console.log('文件解析回来的地址', res)
        })
      },
      //图片校验(图片类型和大小校验)
      imageValid(file){
        return new Promise((resolve) => {
          let imageArrWhile=['image/jpeg','image/png','image/gif']
          const isJPG = imageArrWhile.includes(file.type);
          const isLt2M = file.size / 1024 / 1024 < 2;
          if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
            resolve(false);
          }
          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
            resolve(false);
          }
          resolve(true);
        })
      },

      testParam(){
        const data = {
          "tbSpu": {
            "name": "这个是商品名称",
            "caption": "这个是副标题",
            "brandId": 12,
            "category1Id": 558,
            "category2Id": 559,
            "category3Id": 560,
            "freightId": 10,
            "image": "http://www.qingcheng.com/image/1.jpg",
            "images": "http://www.qingcheng.com/image/1.jpg,http://www.qingcheng.com/image/2.jpg",
            "introduction": "这个是商品详情，html代码",
            "paraItems": {
              "出厂年份": "2019",
              "赠品": "充电器"
            },
            "saleService": "七天包退,闪电退货",
            "sn": "020102331",
            "specItems": {
              "颜色": [
                "红",
                "绿"
              ],
              "机身内存": [
                "64G",
                "8G"
              ]
            },
            "templateId": 42
          },
          "tbSkuList": [
            {
              "sn": "10192010292",
              "num": 100,
              "alertNum": 20,
              "price": 900000,
              "spec": {
                "颜色": "红",
                "机身内存": "64G"
              },
              "image": "http://www.qingcheng.com/image/1.jpg",
              "images": "http://www.qingcheng.com/image/1.jpg,http://www.qingcheng.com/image/2.jpg",
              "status": "1",
              "weight": 130
            },
            {
              "sn": "10192010293",
              "num": 100,
              "alertNum": 20,
              "price": 600000,
              "spec": {
                "颜色": "绿",
                "机身内存": "8G"
              },
              "image": "http://www.qingcheng.com/image/1.jpg",
              "images": "http://www.qingcheng.com/image/1.jpg,http://www.qingcheng.com/image/2.jpg",
              "status": "1",
              "weight": 130
            }
          ]
        }
        data.tbSpu.paraItems=JSON.stringify(data.tbSpu.paraItems)
        data.tbSpu.specItems=JSON.stringify(data.tbSpu.specItems)
        data.tbSkuList=data.tbSkuList.map(mItem=>{
          mItem.spec=JSON.stringify(mItem.spec)
          return mItem;
        })
        this.$axiosReq({
          url: `service-goods/good/add`, data,
          method: 'post', bfLoading: true
        }).then(res => {

        })
      }
    },

  }
</script>

<style lang="scss">
  #Element {

  }

</style>

